<!--用户操作弹窗-->
<ng-template #modalContent>
    <nz-spin [nzSpinning]="modalLoadingState">
        <form nz-form [formGroup]="dataForm" nzLayout="vertical">
            <div nz-row [nzGutter]="24">
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label nzRequired>用户昵称</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                            <input nz-input [(ngModel)]="entity.nickName" formControlName="nickName" placeholder="请输入10个字符以内的真实姓名" />
                            <ng-template #errorNameTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">真实姓名不能为空</ng-container>
                                <ng-container *ngIf="control.hasError('maxlength')">真实姓名不能超过10字符</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>归属部门</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                            <app-tree-select [tree]="deptTree" [(id)]="entity.deptId"></app-tree-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12" >
                    <nz-form-item>
                        <nz-form-label>手机号</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorPhoneTpl">
                            <input nz-input [(ngModel)]="entity.phonenumber" formControlName="phonenumber" placeholder="请输入手机号" />
                            <ng-template #errorPhoneTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">手机号不能为空</ng-container>
                                <ng-container *ngIf="control.hasError('mobile')">请输入正确的手机号</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>邮箱</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorPhoneTpl">
                            <input nz-input [(ngModel)]="entity.email" formControlName="email" placeholder="请输入邮箱号" />
                            <ng-template #errorPhoneTpl let-control>
                                <ng-container *ngIf="control.hasError('email')">请输入正确的邮箱</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12" *ngIf='!entity.userId'>
                    <nz-form-item>
                        <nz-form-label nzRequired>用户名称</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorUserNameTpl">
                            <input nz-input [(ngModel)]="entity.userName" formControlName="userName" placeholder="用户名"/>
                            <ng-template #errorUserNameTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">用户名不能为空</ng-container>
                                <ng-container *ngIf="control.hasError('minlength')">用户名字符不能少于3个</ng-container>
                                <ng-container *ngIf="control.hasError('maxlength')">用户名字符不能超过18个</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12" *ngIf='!entity.userId'>
                    <nz-form-item>
                        <nz-form-label >登录密码</nz-form-label>
                        <ng-template #suffixTemplate>
                            <i nz-icon [nzType]="passwordState ? 'eye-invisible' : 'eye'" (click)="passwordState = !passwordState"></i>
                        </ng-template>
                        <nz-form-control [nzErrorTip]="errorPasswordTpl">
                            <nz-input-group [nzSuffix]="suffixTemplate">
                                <input
                                    nz-input
                                    autocomplete="new-password"
                                    [(ngModel)]="entity.password"
                                    formControlName="password"
                                    [placeholder]="entity.userId === '' ? '请输入6-18个字符以内的登录密码' : '不修改留空即可'"
                                    [type]="passwordState ? 'text' : 'password'"
                                />
                            </nz-input-group>
                            <ng-template #errorPasswordTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">密码不能为空</ng-container>
                                <ng-container *ngIf="control.hasError('minlength')">密码字符不能少于6个</ng-container>
                                <ng-container *ngIf="control.hasError('maxlength')">密码字符不能超过18个</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>


                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>用户性别</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorPhoneTpl">
                           <app-dict-select  [dictKey]='"sys_user_sex"' [dictPlaceholder]='"用户性别"' [(selectKey)]='entity.sex'></app-dict-select>
                            <ng-template #errorPhoneTpl let-control>
                                <ng-container *ngIf="control.hasError('email')">请输入正确的邮箱</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>是否启用</nz-form-label>
                        <nz-form-control>
                            <nz-radio-group [(ngModel)]="entity.status"  nzButtonStyle="solid" formControlName='status'>
                                <label nz-radio-button  nzValue="0">正常</label>
                                <label nz-radio-button  nzValue="1">停用</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>



                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>岗位</nz-form-label>
                        <nz-form-control>
                            <app-normal-select [model]="'multiple'" [(selectKey)]="entity.postIds" [value]='postList' [dictPlaceholder]="'请选择所属岗位'" ></app-normal-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>所属角色</nz-form-label>
                        <nz-form-control>
                            <app-normal-select [model]="'multiple'" [(selectKey)]="entity.roleIds" [value]='roleList' [dictPlaceholder]="'请选择角色'" ></app-normal-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label>备注</nz-form-label>
                        <nz-form-control>
                            <input type='text' [(ngModel)]='entity.remark' nz-input formControlName="remark"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-spin>
</ng-template>
<ng-template #modalFooter>
    <button nz-button nzType="primary" [disabled]="dataForm.invalid" [nzLoading]="saveLoadingState" (click)="onSave()">
        保存
    </button>
</ng-template>

